<template>
	<view class="page">
		<view class="status_box">
			<view class="status" :class="{active:state == 0}" @click="changeState(0)">待发货</view>
			<view class="status" :class="{active:state == 1}" @click="changeState(1)">待收货</view>
			<view class="status" :class="{active:state == 2}" @click="changeState(2)">已完成</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in list">
				<view class="left">
					<image :src="baseUrl + item.goods_info.images[0]" mode=""></image>
				</view>
				<view class="right">
					<view class="name">{{item.goods_text}}</view>
					<view class="text">价格：<text style="color: #22BF8A;">{{item.pay_points}}宝币</text></view>
					<view class="text">备注：{{item.remarks}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 0,
				page: 1,
				pagesize: 10000,
				list: [],
				baseUrl:"",
			}
		},
		methods: {
			changeState(state) {
				this.state = state;
				this.getList()
			},
			getList() {
				this.$get('pointgoodsa/orderlist', {
					state: this.state,
					page: this.page,
					pagesize: this.pagesize,
				}, (res) => {
					console.log(res)
					this.list = res
				})
			},
			toPrice(item) {
				uni.navigateTo({
					url: "/pages/order/price?id=" + item.id
				})
			},
			toMap(item) {
				uni.openLocation({
					latitude: Number(item.address_info.lat), //要去的纬度-地址       
					longitude: Number(item.address_info.lng), //要去的经度-地址
					name: item.address, //地址名称
					address: item.detailed_address, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/order/info?id=" + item.id
				})
			},
			sureOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确认接受该订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$get('recovery/getorder', {
								id: item.id
							}, (res) => {
								uni.showToast({
									title: "接单成功！",
								})
								this.changeState(1);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			refuseOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确认拒接该订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$get('recovery/refuseorder', {
								id: item.id,
								reason: "",
							}, (res) => {
								uni.showToast({
									title: "您已拒绝当前订单，系统会继续派单！",
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
		onLoad(options) {
			this.state = options.state || 0;
			this.baseUrl = this.$enviorment
		},
		onShow() {
			this.getList()
		}
	}
</script>

<style>
	.page {
		padding-top: 100rpx;
	}

	.status_box {
		display: flex;
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.status_box .status {
		flex: 1;
		margin: 0 30rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.status_box .status.active {
		color: #22BF8A;
		border-bottom: 1px solid #22BF8A;
	}

	.list {
		padding: 20rpx 30rpx;
	}

	.list .item {
		background-color: #FFFFFF;
		padding: 30rpx 0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.list .item .name {
		padding: 0 40rpx;
		font-size: 36rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.list .item .text {
		line-height: 60rpx;
		font-size: 26rpx;
		padding: 0 40rpx;
	}

	.list .item .bottom {
		text-align: right;
		border-top: 1px solid #E5E5E5;
		margin-top: 20rpx;
		padding-top: 20rpx;

	}

	.list .item .bottom text {
		margin-right: 20rpx;
		padding: 0 34rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		border: 1px solid #E5E5E5;
		border-radius: 4px;
		display: inline-block;
	}
	.list .item .left{
		float: left;
	}
	
	.list .item .left image{
		width: 250rpx;
		height: 150rpx;
	}
</style>
